<template>
  <GeminiScrollbar @ready="scrollObj = $event" style="height: calc(100vh - 50px)">
    <div class="mainPage">
      <main>
        <div class="header-search">
          <input v-model="workname" type="text">
          <div class="btn primary" @keyup.enter="getJobsInfoNotLogin"
                @click="getJobsInfoNotLogin">搜索</div>
          <Select
            width="154px"
            v-model="worktype"
            placeholder="工作类型" v-on:on-change="getJobsInfoNotLogin">
            <Option
              v-for="item of typelist"
              :key="item.key"
              :label="item.value"
              :value="item.key">
                {{ item.value }}
            </Option>
          </Select>
        </div>
        <div class="search-box">
          <Select
            width="145px"
            v-model="workdirection"
            placeholder="求职意向"
            v-if="userInfo()"
            @on-change="getJobsInfoLogin">
            <Option
              v-for="item of directions"
              :key="item.key"
              :label="item.value"
              :value="item.key">
                {{ item.value }}
            </Option>
          </Select>
          <div class="select-container">
            <Select
              width="145px"
              v-model="exp"
              placeholder="工作经验" v-on:on-change="getJobsInfoNotLogin">
              <Option
                v-for="item of [{key: 0, value: '不限'},
                {key: 1, value: '应届生'},
                {key: 2, value: '1年以内'},
                {key: 3, value: '1-3年'},
                {key: 4, value: '3-5年'},
                {key: 5, value: '5-10年'},
                {key: 6, value: '10年以上'}]"
                :key="item.key"
                :label="item.value"
                :value="item.key">
                  {{ item.value }}
              </Option>
            </Select>
            <Select
              width="145px"
              v-model="edubg"
              placeholder="学历要求" v-on:on-change="getJobsInfoNotLogin">
              <Option
                v-for="item of [{key: 0, value: '不限'},
                  {key: 1, value: '小学'},
                {key: 2, value: '初中'},
                {key: 3, value: '高中'},
                {key: 4, value: '大专'},
                {key: 5, value: '本科'},
                {key: 6, value: '研究生'},
                {key: 7, value: '博士'}]"
                :key="item.key"
                :label="item.value"
                :value="item.key">
                  {{ item.value }}
              </Option>
            </Select>
            <Select
              width="145px"
              v-model="salary"
              placeholder="薪资要求" v-on:on-change="getJobsInfoNotLogin">
              <Option
                v-for="item of [{key: '', value: '不限'},
                {key: 0, value: '3k以下'},
                {key: 1, value: '3-5k'},
                {key: 2, value: '5-10k'},
                {key: 3, value: '10-15k'},
                {key: 4, value: '15-20k'},
                {key: 5, value: '20-30k'},
                {key: 6, value: '30-50k'},
                {key: 7, value: '50k以上'},]"
                :key="item.key"
                :label="item.value"
                :value="item.key">
                  {{ item.value }}
              </Option>
            </Select>
            <Select
              width="145px"
              v-model="economic"
              placeholder="融资情况" v-on:on-change="getJobsInfoNotLogin">
              <Option
                v-for="item of [{key: '', value: '不限'},
                  {key: 0, value: '天使轮'},
                {key: 1, value: 'A轮'},
                {key: 2, value: 'B轮'},
                {key: 3, value: 'C轮'},
                {key: 4, value: '不需要融资'},]"
                :key="item.key"
                :label="item.value"
                :value="item.key">
                  {{ item.value }}
              </Option>
            </Select>
            <Select
              width="145px"
              v-model="scale"
              placeholder="公司规模" v-on:on-change="getJobsInfoNotLogin">
              <Option
                v-for="item of [{key: '', value: '不限'},
                  {key: 0, value: '1-10人'},
                {key: 1, value: '11-50人'},
                {key: 2, value: '51-100人'},
                {key: 3, value: '101-500人'},
                {key: 4, value: '501-1000人'},
                {key: 5, value: '1001-5000人'},
                {key: 6, value: '5001-10000人'},
                {key: 7, value: '>10000人'},]"
                :key="item.key"
                :label="item.value"
                :value="item.key">
                  {{ item.value }}
              </Option>
            </Select>
            <p @click="clearOption">清空筛选条件</p>
          </div>
        </div>
        <div class="job-container">
          <template v-if="jobInfo.length !== 0">
            <div class="card" v-for="job of jobInfo" :key="job.id">
              <div class="left">
                <p class="job-name">
                  {{ job.name }}
                  <span class="salary">{{ job.minSalary }}~{{ job.maxSalary }}/天</span>
                  <span class="company-info">
                    <header>
                      <p class="title">{{ job.name }}</p>
                      <p class="desc">{{ job.companyName }}
                        <i class="inline"></i>HR: {{ job.emplName }}
                      </p>
                      <div class="btn primary" @click="getChat(job)">立即沟通</div>
                    </header>
                    <div class="job-desc">
                      <p class="title">职位描述</p>
                      <GeminiScrollbar :forceGemini="true" style="height:180px;">
                        <div class="desc" v-html="job.desc"></div>
                      </GeminiScrollbar>
                    </div>
                  </span>
                </p>
                <p class="desc">
                  {{ job.loc }} <i class="inline"></i>
                  {{ job.exp }} <i class="inline"></i>
                  {{ job.edubg }}
                </p>
              </div>
              <div class="middle">
                <a class="company-name" @click="getDetail(job.companyId)">{{ job.companyName }}</a>
                <p class="desc">
                  {{ job.companyLine }} <i class="inline"></i>
                  {{ job.economicStatus }} <i class="inline"></i>
                  {{ job.emplNum }}
                </p>
              </div>
              <div class="right unhover">
                <p class="empl-name">
                  <img width="20" src="@/assets/img/default.png">
                  {{ job.emplName }} <i class="inline"></i>
                  {{ job.emplJob }}
                </p>
                <p class="desc">发布于: {{ job.date.split(' ')[0] }}</p>
              </div>
              <div class="right onhover">
                <div class="btn primary" @click="getChat(job)">立即沟通</div>
                <div class="btn primary" @click="addDelivery(job.id)">一键投递</div>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="card" style="cursor:default;">
              <p style="font-size:14px">Emmm找不到您需要的职位，追梦要理性啊</p>
            </div>
          </template>
          <footer v-if="jobInfo.length !== 0">
            <Pages
              @setCurPage="setCurPage"
              :curPage="curPage"
              :total="total"
              :pageSize="pageSize"></Pages>
          </footer>
        </div>
      </main>
      <aside>
        <div class="aside">
          <div class="personal-info" v-if="userInfo()">
            <a class="button" @click="$router.push({ name: 'Resume' })">编辑</a>
            <img width="60" :src="userInfo().thumb">
            <p>{{ personInfo.name }}</p>
            <p class="desc">
              {{ personInfo.age }}岁<i class="inline"></i>
              {{ personInfo.personState }}<i class="inline"></i>
              {{ personInfo.edubg }}
            </p>
            <Select
              width="145px"
              v-model="personInfo.status"
              placeholder="工作类型" @on-change="changeFindJobStatus">
              <Option
                v-for="item of [{key:'0', value:'在职-考虑机会'}
                , {key:'1', value:'在职-月内到岗'}
                , {key:'2', value:'离职-随时到岗'}]"
                :key="item.key"
                :label="item.value"
                :value="item.key">
                  {{ item.value }}
              </Option>
            </Select>
            <div class="apply-status">
              <a href="#/chat">{{ personInfo.comm }}<p>沟通过</p></a>
              <a>{{ personInfo.apply }}<p>已投递</p></a>
              <a>{{ personInfo.interview }}<p>已面试</p></a>
            </div>
          </div>
          <div class="login-box" v-else>
            <p>各行职位任你选</p>
            <form>
              <div class="form-item">
                <div class="form-item-right">
                  <input ref="initFocus" type="tel" v-model="tel" placeholder="手机号">
                  <div class="wrong">{{ telWrong }}</div>
                </div>
              </div>
              <div class="form-item">
                <div class="form-item-right gvc-container">
                  <input class="gvc"
                    type="text"
                    v-model="graphicVerifyCode"
                    placeholder="验证码"
                    @keyup.enter="submit">
                  <img v-bind:src="imgpath" width="80" height="30" @click="getImgValidate">
                  <div class="wrong">{{ gvcWrong }}</div>
                </div>
              </div>
              <div class="form-item">
                <div class="form-item-right">
                  <input type="text"
                    v-model="SNSverifyCode"
                    placeholder="短信验证码"
                    @keyup.enter="type1Login">
                  <div
                    role="button"
                    class="send" :class="{disable: countdown}"
                    @click="sendMsgFn">{{ sendMsg }}
                  </div>
                  <div class="wrong">{{ snsWrong }}</div>
                </div>
              </div>
            </form>
            <div class="btn plain" @click="type1Login">登录 / 注册</div>
            <canvas id="wave" ref="wave"></canvas>
          </div>
        </div>
      </aside>
    </div>
  </GeminiScrollbar>
</template>
<script>
import Select from '@/components/select/Select';
import Option from '@/components/select/Option';
import Pages from '@/components/Pages/index';
import api from '@/api/mainPage';
// eslint-disable-next-line camelcase
import api_login from '@/api/login';
import nginx from '@/assets/nginxconfig';

// 波浪变化高度
const WAVE_HEIGHT = 20;
// 绘制速率
const SCALE = 1.6;
const CYCLE = 360 / SCALE;

function distance(height, currAngle, diffAngle) {
  return height * Math.cos((((currAngle - diffAngle) % 360) * Math.PI) / 180);
}

function draw(ctx, width, height, time) {
  ctx.clearRect(0, 0, width, height);

  // eslint-disable-next-line no-param-reassign
  time = (time + 1) % CYCLE;
  // 当前正弦角度
  const angle = SCALE * time;
  // 两个波峰相差的角度
  const dAngle = 60;

  ctx.beginPath();
  ctx.moveTo(-40, height + distance(WAVE_HEIGHT, angle, 0));
  ctx.bezierCurveTo(
    width * 0.4,
    height + distance(WAVE_HEIGHT, angle, dAngle),
    width * 0.6,
    height + distance(WAVE_HEIGHT, angle, 2 * dAngle),
    width + 30,
    height + distance(WAVE_HEIGHT, angle, 3 * dAngle),
  );
  // eslint-disable-next-line no-param-reassign
  ctx.strokeStyle = 'rgba(255,255,255,0.5)';
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(-90, height + distance(WAVE_HEIGHT, angle, -100));
  ctx.bezierCurveTo(
    width * 0.3,
    height + distance(WAVE_HEIGHT, angle, dAngle - 100),
    width * 0.8,
    height + distance(WAVE_HEIGHT, angle, (2 * dAngle) - 100),
    width + 20,
    height + distance(WAVE_HEIGHT, angle, (3 * dAngle) - 100),
  );
  // eslint-disable-next-line no-param-reassign
  ctx.strokeStyle = 'rgba(255,255,255,0.3)';
  ctx.stroke();


  // animate
  window.requestAnimationFrame(() => {
    draw(ctx, width, height, time);
  });
}


export default {
  name: 'MainPage',
  props: ['isLogin'],
  data() {
    return {
      worktype: '',
      workname: '',
      exp: '',
      edubg: '',
      salary: '',
      economic: '',
      scale: '',
      workdirection: '',
      typelist: [
        {
          key: undefined,
          value: '不限',
        },
      ],
      jobInfo: [],
      personInfo: {},

      curPage: 1,
      pageSize: 20,
      total: 1000,
      directions: [],

      imgpath: '',
      imgid: '',
      phoneid: '',
      tel: '',
      graphicVerifyCode: '',
      SNSverifyCode: '',
      // 发送验证码/倒计时
      sendMsg: '发送验证码',
      countdown: false,

      telWrong: '',
      gvcWrong: '',
      snsWrong: '',

      scrollObj: null,
    };
  },
  mounted() {
    this.getAllType();
    if (this.userInfo()) {
      this.getDirectionAndJob();
      this.getCandidateDetail(this.userInfo().userId);
    } else {
      this.getJobsInfoNotLogin();
      const c = this.$refs.wave;
      const width = 500;
      const height = 130;

      const ctx = c.getContext('2d');
      c.width = width;
      c.height = height;
      ctx.globalCompositeOperation = 'destination-over';
      ctx.lineWidth = 100;

      // start
      window.requestAnimationFrame(() => {
        draw(ctx, width, height, 0);
      });
      this.getImgValidate();
    }
  },
  methods: {
    getChat(p) {
      if (!sessionStorage.getItem('userId')) {
        this.$alert('请先登录');
        return;
      }
      this.$router.push({ name: 'ChatRoom', query: { person: p } });
    },
    getDetail(p) {
      this.$router.push({ path: '/company/companyInfo', query: { id: p } });
    },
    addDelivery(jobId) {
      if (!this.userInfo()) {
        this.$alert('请先登录');
        this.$refs.initFocus.focus();
        return;
      }
      const params = new URLSearchParams();
      params.append('userId', this.userInfo().userId);
      params.append('jobId', jobId);
      api.addDeliveryApi(params).then(async (response) => {
        this.$alert(response.data.data);
      });
    },
    changeFindJobStatus() {
      const params = new URLSearchParams();
      params.append('userId', this.userInfo().userId);
      params.append('status', this.personInfo.status);
      api.changeFindJobStatusApi(params).then(async (response) => {
        if (response.data.code === 200) {
          this.$alert('修改成功');
        } else {
          this.$alert(response.data.message);
        }
      });
    },
    userInfo() {
      if (this.$store.getters['user/getUserInfo'].userId !== null) {
        return this.$store.getters['user/getUserInfo'];
      }
      return null;
    },
    getAllType() {
      api.getAllTypeApi().then(async (response) => {
        const datas = response.data.data;
        for (let i = 0; i < datas.length; i += 1) {
          this.typelist.push(
            {
              key: datas[i].businessId,
              value: datas[i].name,
            },
          );
        }
      });
    },
    clearOption() {
      this.exp = 0;
      this.edubg = 0;
      this.salary = '';
      this.economic = '';
      this.scale = '';
      this.worktype = '';
      this.workname = '';
      this.getJobsInfoNotLogin();
    },
    getJobsInfoNotLogin() {
      const params = new URLSearchParams();
      params.append('exp', this.exp);
      params.append('edu', this.edubg);
      params.append('money', this.salary);
      params.append('financing', this.economic);
      params.append('scale', this.scale);
      params.append('jobType', this.worktype);
      params.append('jobName', this.workname);
      params.append('rows', this.pageSize);
      params.append('page', this.curPage);
      api.getJobsInfoNotLoginApi(params).then(async (response) => {
        this.jobInfo = [];
        const datas = response.data.rows;
        this.total = response.data.total;
        this.curPage = response.data.pageNu;
        for (let i = 0; i < datas.length; i += 1) {
          this.jobInfo.push(
            {
              id: datas[i].bjob.businessId,
              companyId: datas[i].bcompany.businessId,
              name: datas[i].bjob.name,
              minSalary: datas[i].bjob.minSalary,
              maxSalary: datas[i].bjob.maxSalary,
              desc: datas[i].bjob.description,
              loc: datas[i].ecity.name,
              exp: this.getExpName(datas[i].bjob.experience),
              edubg: this.getEduName(datas[i].bjob.educated),
              companyName: datas[i].bcompany.name,
              companyLine: datas[i].bcompany.legalPerson,
              economicStatus: this.getFinName(datas[i].bcompany.financing),
              emplNum: this.getScaName(datas[i].bcompany.scale),
              emplName: datas[i].sysUser.realname,
              emplJob: datas[i].bdept.name,
              date: datas[i].bjob.createDate,
              otherId: datas[i].sysUser.businessId,
            },
          );
        }
        this.$nextTick(() => {
          this.scrollObj.update();
        });
      });
    },
    getDirectionAndJob() {
      const params = new URLSearchParams();
      params.append('userId', this.userInfo().userId);
      api.getDirectionApi(params).then(async (response) => {
        this.directions = [];
        const datas1 = response.data.data;
        for (let i = 0; i < datas1.length; i += 1) {
          this.directions.push(
            {
              key: datas1[i].businessId,
              value: `${datas1[i].cityName}-${datas1[i].typeName}`,
            },
          );
        }
        const params2 = new URLSearchParams();
        if (datas1.length !== 0) {
          params2.append('directionId', datas1[0].businessId);
          this.workdirection = datas1[0].businessId;
          api.getJobsInfoLoginApi(params2).then(async (res2) => {
            this.jobInfo = [];
            const datas = res2.data.rows;
            this.total = res2.data.total;
            this.curPage = res2.data.pageNu;
            for (let i = 0; i < datas.length; i += 1) {
              this.jobInfo.push(
                {
                  id: datas[i].bjob.businessId,
                  companyId: datas[i].bcompany.businessId,
                  name: datas[i].bjob.name,
                  minSalary: datas[i].bjob.minSalary,
                  maxSalary: datas[i].bjob.maxSalary,
                  desc: datas[i].bjob.description,
                  loc: datas[i].ecity.name,
                  exp: this.getExpName(datas[i].bjob.experience),
                  edubg: this.getEduName(datas[i].bjob.educated),
                  companyName: datas[i].bcompany.name,
                  companyLine: datas[i].bcompany.legalPerson,
                  economicStatus: this.getFinName(datas[i].bcompany.financing),
                  emplNum: this.getScaName(datas[i].bcompany.scale),
                  emplName: datas[i].sysUser.realname,
                  emplJob: datas[i].bdept.name,
                  date: datas[i].bjob.createDate,
                  otherId: datas[i].sysUser.businessId,
                },
              );
            }
            this.$nextTick(() => {
              this.scrollObj.update();
            });
          });
        } else {
          this.getJobsInfoNotLogin();
        }
      });
    },
    getCandidateDetail(id) {
      const param = new URLSearchParams();
      param.append('userId', id);
      api.getCandidateDetailApi(param).then(async (response) => {
        this.personInfo = {
          name: response.data.data.sysUser.realname,
          age: response.data.data.sysUser.age,
          personState: this.getExpName2(response.data.data.bcandidate.experience),
          edubg: this.getEduName2(response.data.data.bcandidate.educated),
          status: response.data.data.bcandidate.status,
          comm: response.data.data.num1,
          apply: response.data.data.num2,
          interview: response.data.data.num3,
        };
      });
    },
    getJobsInfoLogin() {
      const params2 = new URLSearchParams();
      params2.append('directionId', this.workdirection);
      api.getJobsInfoLoginApi(params2).then(async (res2) => {
        this.jobInfo = [];
        const datas = res2.data.rows;
        this.total = res2.data.total;
        this.curPage = res2.data.pageNu;
        for (let i = 0; i < datas.length; i += 1) {
          this.jobInfo.push(
            {
              id: datas[i].bjob.businessId,
              companyId: datas[i].bcompany.businessId,
              name: datas[i].bjob.name,
              minSalary: datas[i].bjob.minSalary,
              maxSalary: datas[i].bjob.maxSalary,
              desc: datas[i].bjob.description,
              loc: datas[i].ecity.name,
              exp: this.getExpName(datas[i].bjob.experience),
              edubg: this.getEduName(datas[i].bjob.educated),
              companyName: datas[i].bcompany.name,
              companyLine: datas[i].bcompany.legalPerson,
              economicStatus: this.getFinName(datas[i].bcompany.financing),
              emplNum: this.getScaName(datas[i].bcompany.scale),
              emplName: datas[i].sysUser.realname,
              emplJob: datas[i].bdept.name,
              date: datas[i].bjob.createDate,
            },
          );
        }
      });
    },
    setCurPage(page) {
      // TODO 换页刷新
      this.curPage = page;
    },
    getEduName(id) {
      switch (id) {
        case '0':
          return '不限';
        case '1':
          return '小学';
        case '2':
          return '初中';
        case '3':
          return '高中';
        case '4':
          return '专科';
        case '5':
          return '本科';
        case '6':
          return '研究生';
        case '7':
          return '博士';
        default:
          return null;
      }
    },
    getEduName2(id) {
      switch (id) {
        case '0':
          return '小学';
        case '1':
          return '初中';
        case '2':
          return '高中';
        case '3':
          return '专科';
        case '4':
          return '本科';
        case '5':
          return '研究生';
        case '6':
          return '博士';
        default:
          return '小学';
      }
    },
    getStatusName(id) {
      switch (id) {
        case '0':
          return '观望中-在职';
        case '1':
          return '在职-寻找职位';
        case '2':
          return '离职-寻找职位';
        default:
          return null;
      }
    },
    getExpName(id) {
      switch (id) {
        case '0':
          return '不限';
        case '1':
          return '应届生';
        case '2':
          return '一年以内 ';
        case '3':
          return '一到三年';
        case '4':
          return '三到五年';
        case '5':
          return '五到十年';
        case '6':
          return '五年以上';
        default:
          return null;
      }
    },
    getExpName2(id) {
      switch (id) {
        case '0':
          return '应届生';
        case '1':
          return '一年以内 ';
        case '2':
          return '一到三年';
        case '3':
          return '三到五年';
        case '4':
          return '五到十年';
        case '5':
          return '五年以上';
        default:
          return null;
      }
    },
    getFinName(id) {
      switch (id) {
        case '0':
          return '天使轮';
        case '1':
          return 'A轮';
        case '2':
          return 'B轮 ';
        case '3':
          return 'C轮';
        case '4':
          return '不需要融资';
        default:
          return null;
      }
    },
    getScaName(id) {
      switch (id) {
        case '0':
          return '1-10人';
        case '1':
          return '11-50人';
        case '2':
          return '51-100人 ';
        case '3':
          return '101-500人';
        case '4':
          return '501-1000人';
        case '5':
          return '1001-5000人';
        case '6':
          return '5001-10000人';
        case '7':
          return '>10000人';
        default:
          return null;
      }
    },

    getImgValidate() {
      const that = this;
      api_login.getImgValidate({}).then((response) => {
        that.$data.imgpath = response.data.data.base64;
        that.$data.imgid = response.data.data.id;
      });
    },
    sendMsgFn() {
      // 简单逻辑：如果手机号长度不等于11位，则显示手机号错误
      if (this.tel.length !== 11) {
        this.telWrong = '手机号不正确';
        return;
      }
      if (this.graphicVerifyCode === '') {
        this.gvcWrong = '请输入验证码';
        return;
      }
      this.gvcWrong = '';
      this.telWrong = '';
      const that = this;
      if (this.countdown) {
        return;
      }
      // 判断图形验证码是否正确
      api_login.validateImg({
        id: that.$data.imgid,
        code: that.$data.graphicVerifyCode,
      }).then((response) => {
        // 如果正确则发送短信验证码
        if (response.data.data === true) {
          that.gvcWrong = '';
          api_login.getPhoneValidate({
            phone: that.$data.tel,
            type: 1,
          }).then((res) => {
            that.$data.phoneid = res.data.data;
            // console.log(res);
            let seconds = 10;
            that.$data.sendMsg = `已发送(${seconds}s)`;
            that.$data.countdown = true;
            const interval = setInterval(() => {
              seconds -= 1;
              that.$data.sendMsg = `已发送(${seconds}s)`;
              if (seconds === 0) {
                clearInterval(interval);
                that.$data.sendMsg = '重新发送';
                that.$data.countdown = false;
              }
            }, 1000);
          });
          // 如果错误则显示图形验证码错误
        } else {
          that.gvcWrong = '验证码不正确';
          api_login.getImgValidate({}).then((res) => {
            that.$data.imgpath = res.data.data.base64;
            that.$data.imgid = res.data.data.id;
          });
        }
      });
    },
    type1Login() {
      if (this.tel.length !== 11) {
        this.telWrong = '手机号不正确';
        return;
      }
      if (this.graphicVerifyCode === '') {
        this.gvcWrong = '请输入验证码';
        return;
      }
      if (this.$data.SNSverifyCode === '') {
        this.snsWrong = '请输入手机验证码';
        return;
      }
      const that = this;
      // 判断手机验证码是否正确，错误则显示手机验证码错误
      const params = new URLSearchParams();
      params.append('id', that.$data.phoneid);
      params.append('code', that.$data.SNSverifyCode);
      params.append('username', that.$data.tel);
      api_login.candidateLoginByPhone(params).then((response) => {
        // console.log(response);
        if (response.data.code === 200) {
          this.$alert('登陆成功');
          this.snsWrong = '';
          // 存入变量
          sessionStorage.setItem('userToken', response.data.data.token);
          sessionStorage.setItem('userId', response.data.data.businessId);
          sessionStorage.setItem('loginType', 1);
          sessionStorage.setItem('realName', response.data.data.realName || '求职者');
          sessionStorage.setItem('thumb', nginx.nginxaddress + response.data.data.remark);
          this.$store.dispatch('user/setUserInfo', {
            loginType: that.loginType,
            userToken: response.data.data.token,
            userId: response.data.data.businessId,
            realName: response.data.data.realName,
            thumb: nginx.nginxaddress + response.data.data.remark,
          });
          if (response.data.data.realName == null) {
            this.$alert('登陆成功，请更新简历');
            this.$router.push({ path: '/applyer/resume' });
            return;
          }
          this.getDirectionAndJob();
          this.getCandidateDetail(response.data.data.businessId);
        } else if (response.data.message === '验证码错误') {
          this.$alert('验证码错误');
        } else if (response.data.message === '验证码已过期') {
          this.$alert('验证码已过期');
        } else if (response.data.message === '用户不存在') {
          const params2 = new URLSearchParams();
          params2.append('id', that.$data.phoneid);
          params2.append('code', that.$data.SNSverifyCode);
          params2.append('phone', that.$data.tel);
          api_login.register(params2).then((res) => {
            if (res.data.code === 200) {
              const params3 = new URLSearchParams();
              params3.append('id', that.$data.phoneid);
              params3.append('code', that.$data.SNSverifyCode);
              params3.append('username', that.$data.tel);
              api_login.candidateLoginByPhone(params3).then((r) => {
                if (r.data.code === 200) {
                  this.$alert('登陆成功');
                  this.snsWrong = '';
                  // 存入变量
                  sessionStorage.setItem('userToken', r.data.data.token);
                  sessionStorage.setItem('userId', r.data.data.businessId);
                  sessionStorage.setItem('loginType', 1);
                  sessionStorage.setItem('realName', r.data.data.realName);
                  this.$store.dispatch('user/setUserInfo', {
                    loginType: 1,
                    userToken: r.data.data.token,
                    userId: r.data.data.businessId,
                    realName: r.data.data.realName,
                  });
                  this.getCandidateDetail(r.data.data.businessId);
                  this.$emit('login', {
                    realName: r.data.data.realName,
                    type: 1,
                  });
                  this.$router.push({ path: '/' });
                } else {
                  this.$alert(r.data.message);
                }
              });
            } else {
              this.$alert(res.data.message);
            }
          });
        }
      });
    },
  },
  components: {
    Select,
    Option,
    Pages,
  },
};
</script>
<style lang="less">
@import url(../../static/style/site.vars.less);
#wave {
  width: 218px;
  height: 50px;
}
.mainPage {
  border: .1px transparent solid;
  width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  margin-bottom: 180px;
  &>main {
    flex: 1;
    font-size: 0;
    margin-right: 10px;
    .header-search {
      margin-top: 30px;
      text-align: left;
      font-size: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      &>.btn {
        width: 15%;
        height: 48px;
      }
      &>.select-box {
        position: absolute;
        left: 1px;
        height: calc(100% - 5px);
        .select {
          border: 0;
          margin-top: 1px;
          height: 100%;
          .chosen {
            padding-left: 10px;
            font-size: 18px;
          }
        }
        .options-box {
          border: 0;
        }
      }
      &>input {
        box-sizing: border-box;
        width: 85%;
        padding-left: 163px;
        height: 48px;
        font-size: 18px;
        box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.13);
        border: 1px transparent solid;
        transition: border .1s linear;
        &:hover, &:focus {
          border: 1px #4E8ACF solid;
        }
      }
    }
    .search-box {
      padding: 10px;
      height: 80px;
      margin-top: 10px;
      background: #fff;
      box-shadow: 0 3px 6px rgba(6,0,1,.05);
      .select {
        border: 0;
      }
      .select-container {
        font-size: 12px;
        margin-top: 25px;
        p {
          display: inline-block;
          margin-left: 15px;
          cursor: pointer;
          color: rgb(161, 161, 161);
        }
      }
    }
    .job-container {
      margin-top: 10px;
      .card {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 107px;
        background: #fff;
        padding-left: 40px;
        padding-right: 40px;
        box-sizing: border-box;
        cursor: pointer;
        transition: background .3s ease;
        &:hover {
          background: #F9FAFC;
        }
        &:hover .right.onhover {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          flex-direction: row;
          &>.btn {
            margin-left: 10px;
          }
        }
        &:hover .right.unhover {
          display: none;
        }
        .left, .middle, .right {
          height: 100%;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          border-bottom: 1px solid rgb(230, 230, 230);
          box-sizing: border-box;
        }
        .left {
          flex: 1.8;
          .job-name {
            color: @site-main;
            font-size: 18px;
            margin-bottom: 5px;
            position: relative;
            width: calc(100% - 30px);
            &:hover .company-info {
              opacity: 1;
              z-index: 100;
            }
            .salary {
              color: #FC7076;
              margin-left: 10px;
            }
            .company-info {
              z-index: -100;
              height: 325px;
              width: 400px;
              position: absolute;
              // display: none;
              opacity: 0;
              left: 270px;
              top: -26px;
              box-shadow: 0 0 12px -5px #999;
              header {
                height: 85px;
                box-sizing: border-box;
                padding: 20px;
                font-size: 16px;
                background: rgba(233, 243, 255, 0.835);
                .title {
                  margin-bottom: 5px;
                }
                .btn {
                  float: right;
                  position: relative;
                  top: -40px;
                }
              }
              .job-desc {
                padding: 20px;
                background: #fff;
                height: 200px;
                .title {
                  font-size: 14px;
                  color: #000;
                  margin-bottom: 10px;
                }
              }
            }
          }
          .desc {
            font-size: 12px;
            color: rgb(167, 167, 167);
          }
        }
        .middle {
          .company-name {
            font-size: 18px;
            margin-bottom: 5px;
            transition: color .3s ease;
            &:hover {
              color: @site-main;
            }
          }
          &>.desc {
            font-size: 12px;
            color: rgb(167, 167, 167);
          }
        }
        .right {
          flex: 1;
          height: 100%;
          align-items: flex-end;
          &.onhover {
            display: none;
          }
          .empl-name {
            font-size: 13px;
            display: flex;
            justify-content: center;
            align-items: center;
            &>img {
              border-radius: 20px;
              margin-right: 10px;
            }
          }
          &>.desc {
            font-size: 12px;
            color: rgb(167, 167, 167);
            padding-left: 30px;
            margin-top: 10px;
          }
        }

      }
      footer {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        background: #fff;
      }
    }
  }
  &>aside {
    margin-top: 30px;
    .aside {
      box-sizing: border-box;
      position: relative;
      width: 218px;
      .login-box {
        background: #0064D3;
        font-size: 14px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 30px 10px;
        padding-bottom: 0;
        &>p {
          color: #fff;
          font-size: 20px;
          letter-spacing: 1px;
        }
        &>form {
           padding-bottom: 0;
           padding-top: 0;
          .form-item-left {
            width: 80px;
            text-align: right;
          }
          .form-item-right {
            width: 200px;
            position: relative;
            text-align: left;
            input {
              width: 170px;
            }
          }
          .gvc-container {
            display: flex;
            justify-content: left;
            align-items: center;
            .gvc {
              margin-right: 5px;
              width: 85px;
            }
          }
          .send {
            position: absolute;
            width: 70px;
            text-align: center;
            top: 6px;
            right: 10px;
            font-size: 10px;
            border-left: 1px solid rgb(209, 209, 209);
            padding-left: 5px;
            color: @site-main;
            cursor: pointer;
            &.disable {
              color: #7a7a7a;
              cursor: not-allowed;
            }
          }
          .wrong {
            position: absolute;
            font-size: 10px;
            top: 29px;
            color: rgb(255, 103, 103);
          }
        }
        .btn.plain {
          width: 170px;
        }
      }
      .personal-info {
        background: #fff;
        font-size: 14px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 30px 10px;
        padding-bottom: 20px;
        .button {
          position: absolute;
          right: 10px;
          top: 10px;
          cursor: pointer;
          transition: color .3s ease;
          user-select: none;
          font-size: 12px;
          &:hover {
            color: @site-main;
          }
        }
        &>img {
          border-radius: 60px;
          margin-bottom: 10px;
        }
        &>p {
          margin-bottom: 5px;
          &.desc {
            font-size: 12px;
            margin-top: 3px;
          }
        }
        .select-box {
          margin: 10px 0;
        }
        .apply-status {
          display: flex;
          justify-content: center;
          align-items: center;
          text-align: center;
          margin: 10px 0;
          &>a {
            cursor: pointer;
            margin: 0 15px;
            font-size: 16px;
            transition: color .1s ease;
            color: #000;
            &:hover {
              color: @site-main !important;
            }
            p {
              font-size: 12px;
            }
          }
        }
      }
      .resume {
        background: #fff;
        margin-top: 10px;
        padding: 10px;
        .btn.primary {
          display: block;
          width: 100%;
        }
        &>p {
          margin-bottom: 10px;
        }
        &>ul {
          margin-bottom: 10px;
          li {
            padding: 10px;
            display: flex;
            justify-content: left;
            align-items: center;
            cursor: pointer;
            &:hover {
              background: rgb(240, 240, 240)
            }
            &>img {
              margin-right: 5px;
            }
          }
        }
        .online-resume {
          width: 100%;
          margin-top: 10px;
          border-top: 1px solid rgb(233, 233, 233);
          p {
            margin-top: 10px;
            font-size: 14px;
            &.update-time {
              font-size: 12px;
              color: rgb(180, 180, 180);
            }
            a {
              cursor: pointer;
              margin-left: 10px;
              color: rgb(180, 180, 180);
            }
          }
        }
      }
    }
  }
  .inline {
    display: inline-block;
    width: 1px;
    height: 12px;
    vertical-align: middle;
    background: #e0e0e0;
    margin: 0 10px;
  }
}
</style>
